﻿@using RuoVea.ExUtil;

@using Microsoft.Extensions.Options

@{
    ViewData["Title"] = "作业";

    Layout = "";
}
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewData["Title"] - MES管理系统</title>
    <link href="/elementui/index.css" rel="stylesheet" />
    <link href="/elementui/index.extend.css?v=@RuoVea.ExUtil.Time.Time.Now.GetTimeStamp()" rel="stylesheet" />
    <style scoped>


    </style>
</head>
<body>
    <div id="main" v-cloak>
        <el-main>
            <el-row type="flex" align="center">
                <el-extend-search :search="handleLoadData"
                                  :open-add-dialog="handleOpenDialog"
                                  :filter-json="filterJson"
                                  :show-search="true"
                                  :show-add="true"
                                  :show-refresh="true">
                </el-extend-search>
            </el-row>
            <el-row type="flex" align="center">
                <el-col :span="24" style="padding: 10px 0 0 0;">
                    <el-extend-table :columns="columns"
                                     :tool-visible="false"
                                     :table-data="tableData"
                                     primary-key="name"
                                     :load-data="handleLoadData"
                                     :view-detail="viewDetailDialog"
                                     :handle-edit="handleOpenDialog"
                                     :handle-delete="handleDelete"></el-extend-table>
                </el-col>
            </el-row>
        </el-main>
        <el-extend-form :form-json="formJson"
                        :submit="submitForm"
                        :form-data="formData"
                        v-loading.fullscreen.lock="loading"
                        :close-confirm="true"
                        :dialog-width="dialogWidth"
                        :dialog-visible="dialogVisible" :cancel="handleClose" :footer-visible="footerVisible"></el-extend-form>
    </div>

    <script type="text/javascript" src="/vue/vue.js?v=2.0"></script>
    <script type="text/javascript" src="/vue/vue-i18n.min.js?v=2.0"></script>
    <script type="text/javascript" src="/elementui/index.js"></script>
    <script type="text/javascript" src="/elementui/index.extend.js?v=@RuoVea.ExUtil.Time.Time.Now.GetTimeStamp()"></script>
    @*     <script>
    Vue.prototype.i18n.messages.zhCN = { "confirmexit": "确认退出?", "tips": "提示", "determine": "确定", "cancel": "取消", "changepassword": "修改密码", "logout": "退出", "aresureclose": "确认关闭?", "browserversionlow": "您的浏览器版本过低，无法显示报表内容！建议升级浏览器或更换浏览器！", "pleaseenter": "请输入", "pleasechoose": "请选择", "pleaseenternumber": "请输入数字", "pleaseselectdatetime": "请选择日期时间", "pleaseselectdate": "请选择日期", "pleaseselecttime": "请选择时间", };
    </script> *@
    <script type="text/javascript" src="/vue/axios.min.js"></script>
    <script type="text/javascript" src="/vue/axios.min.extend.js?v=@RuoVea.ExUtil.Time.Time.Now.GetTimeStamp()"></script>
    <script>
        Vue.component('ElExtendBody', {
            props: {
                logoSrc: String,
                logoTitle: String,
                activeIndex: { type: String, },
                menuData: Array,
                userName: String,
                userAvatar: String,
                loginOutTxt: String,
                handleLogout: Function,
            },
            methods: {
                initForm() {
                    this.formJson.forEach(item => { this.$set(this.formData, item.prop, item.default); });
                },
                handleOpenDialog(e) {
                    if (e) { this.formData = e.row; }
                    else { this.initForm(); }
                    this.dialogVisible = true;
                },
                handleClose(e) {
                    this.dialogVisible = e;
                },
                handleLoadData(e) {
                    console.log("查询条件", e);
                    if (e)
                        this.filter = e.filter;
                    this.loading = true;
                    // this.post("@("/jobList")", that.tableQuery)
                    //     .then(function (res) {
                    //         that.tableData = res.data.data.rows;
                    //         that.tableQuery.totalRows = res.data.data.totalRows;
                    //         that.loading = false;
                    //     }).catch(function (res) { that.loading = false; });
                },
                handleDelete(e) {
                    console.log("handleDelete", e);
                    return false;
                    //     axios("@("/remove/")" + row.id).then(function (res) {
                    //         if (res.data.code == 200) {
                    //             that.$message({ message: res.data.message, center: true, type: 'success' });
                    //             rows.splice(index, 1);
                    //             that.OnLoadJobs();
                    //         } else {
                    //             that.$message({ message: res.data.message, center: true, type: 'error' });
                    //         }
                    //     });
                },
                submitForm(data) {
                    console.log("表单提交方法", data)
                    // axios.post("@("/jobsave")", this.form).then(function (res) {
                    //     if (res.data.code == 200) {
                    //         ELEMENT.MessageBox.alert(res.data.message, "系统信息", {
                    //             type: 'success', callback: () => {
                    //                 that.OnLoadJobs(); that.dialogForm = that.dialogInitForm; that.dialogFormVisible = false;
                    //             }
                    //         });
                    //     } else {
                    //         ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'info', callback: () => { } });
                    //     }
                    // });
                },
                viewDetailDialog(e) {
                    console.info("viewDialogForm 打开详情弹窗方法")
                    this.dialogVisible = true;
                    if (e) {
                        this.formData = e.row;
                    }
                    // axios("@("/getjob/")" + row.id).then(function (res) { if (res.data.code == 200) { that.dialogForm = res.data.data; } });
                },
            },
            template: ``
        });
        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    filterJson: [
                        {
                            "type": "input",
                            "label": "大大姓名",
                            "prop": "name",
                            "default": ""
                        },
                        {
                            "type": "select",
                            "label": "性别",
                            "prop": "gender",
                            "default": null,
                            "options": [
                                { "label": "男", "value": "male" },
                                { "label": "女", "value": "female" }
                            ]
                        },
                        {
                            "type": "switch",
                            "label": "是否同意",
                            "prop": "isAgree",
                            "default": false
                        },
                        {
                            "type": "datetimepicker",
                            "label": "预约时间",
                            "prop": "appointmentTime",
                            "default": null,
                            "placeholder": "请选择预约时间",
                            "format": "yyyy-MM-dd HH:mm:ss",
                            "valueFormat": "yyyy-MM-dd HH:mm:ss",
                            "dateTimePickerType": "datetime"
                        },
                        {
                            "type": "radio",
                            "label": "爱好",
                            "prop": "hobby",
                            "default": undefined,
                            "options": [
                                { "label": "足球", "value": "soccer" },
                                { "label": "篮球", "value": "basketball" }
                            ]
                        },
                        {
                            "type": "checkbox",
                            "label": "技能",
                            "prop": "skills",
                            "default": [],
                            "options": [
                                { "label": "编程", "value": "coding" },
                                { "label": "设计", "value": "design" },
                                { "label": "测试", "value": "test" },
                                { "label": "部署", "value": "uat" },
                            ]
                        }
                    ],
                    filter: {},
                    tableData: [
                        {
                            "name": "张三",
                            "appointmentTime": "2024-08-22",
                            "gender": "male",
                            "isAgree": true,
                            "quantity": 10,
                            "hobby": "soccer",
                            "skills": ["coding", "design"]
                        },
                        {
                            "name": "李四",
                            "appointmentTime": "2024-08-23",
                            "gender": "female",
                            "isAgree": false,
                            "quantity": 5,
                            "hobby": "basketball",
                            "skills": ["design", "test"]
                        },
                        {
                            "name": "王五",
                            "appointmentTime": "2024-08-24",
                            "gender": "male",
                            "isAgree": true,
                            "quantity": 20,
                            "hobby": "soccer",
                            "skills": ["coding", "uat"]
                        },
                        {
                            "name": "赵六",
                            "appointmentTime": "2024-08-25",
                            "gender": "female",
                            "isAgree": true,
                            "quantity": 15,
                            "hobby": "basketball",
                            "skills": ["coding", "design", "test"]
                        },
                        {
                            "name": "孙七",
                            "appointmentTime": "2024-08-26",
                            "gender": "male",
                            "isAgree": false,
                            "quantity": 5,
                            "hobby": "soccer",
                            "skills": ["test", "uat"]
                        },
                        {
                            "name": "周八",
                            "appointmentTime": "2024-08-27",
                            "gender": "female",
                            "isAgree": true,
                            "quantity": 10,
                            "hobby": "basketball",
                            "skills": ["coding", "design"]
                        },
                        {
                            "name": "吴九",
                            "appointmentTime": "2024-08-28",
                            "gender": "male",
                            "isAgree": true,
                            "quantity": 20,
                            "hobby": "soccer",
                            "skills": ["design", "test", "uat"]
                        },
                        {
                            "name": "郑十",
                            "appointmentTime": "2024-08-29",
                            "gender": "female",
                            "isAgree": false,
                            "quantity": 15,
                            "hobby": "basketball",
                            "skills": ["coding", "uat"]
                        },
                        {
                            "name": "王十一",
                            "appointmentTime": "2024-08-30",
                            "gender": "male",
                            "isAgree": true,
                            "quantity": 25,
                            "hobby": "soccer",
                            "skills": ["coding", "design", "test"]
                        },
                        {
                            "name": "陈十二",
                            "appointmentTime": "2024-08-31",
                            "gender": "female",
                            "isAgree": true,
                            "quantity": 30,
                            "hobby": "basketball",
                            "skills": ["coding", "design", "test", "uat"]
                        }
                    ],
                    columns: [
                        {
                            prop: "name",
                            label: "姓名", textAlign: "center",
                            width: 180
                        },
                        {
                            prop: "appointmentTime",
                            label: "预约时间",
                            width: 180
                        },
                        {
                            prop: "gender",
                            label: "性别", textAlign: "center",
                            width: 180
                        }, {
                            prop: "isAgree",
                            label: "是否同意", textAlign: "center",
                            formatter: (row, column, cellValue) => {
                                return cellValue?`是`:`否`;
                            },
                           
                            width: 180
                        }, {
                            prop: "quantity",
                            label: "数量", textAlign: "center",
                            width: 180
                        },
                        {
                            prop: "hobby", showOverflowTooltip: true,
                            label: "爱好"
                        }, {
                            prop: "skills", showOverflowTooltip: true,
                            label: "技能"
                        },
                    ],

                    dialogVisible: false,
                    footerVisible: true,
                    dialogWidth: "40%",
                    buttonSize: "small",

                    loading: false,
                    formData: {},
                    formJson: [{
                            type: 'input',
                            label: '大大姓名',
                            prop: 'name',
                            default: '', // 默认值为空字符串
                            rules: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
                        },
                        {
                            type: 'select',
                            label: '性别',
                            prop: 'gender', default: null, // 对于选择类型，默认值可以设置为 null
                            options: [
                                { label: '男', value: 'male' },
                                { label: '女', value: 'female' }
                            ],
                            rules: [{ required: true, message: '性别不能为空' }]
                        },
                        {
                            type: 'switch',
                            label: '是否同意',
                            prop: 'isAgree',
                            default: false, // 开关默认状态为 false，表示关闭
                            rules: [{ required: true, message: '请确认是否同意', trigger: 'change' }]
                        },
                        {
                            type: 'datetimepicker',
                            label: '预约时间',
                            prop: 'appointmentTime',
                            default: null, // 可以设置默认值，也可以不设置
                            placeholder: '请选择预约时间',
                            format: 'yyyy-MM-dd HH:mm:ss',
                            valueFormat: 'yyyy-MM-dd',
                            dateTimePickerType: 'datetime', // 可以是 'date' | 'datetime' | 'year' | 'month' | 'time' 等
                            rules: [
                                { required: true, message: '预约时间不能为空', trigger: 'change' }
                            ]
                        },
                        {
                            type: 'number', // 新增的数字输入框类型
                            label: '数量',
                            prop: 'quantity',
                            min: 1, // 最小值
                            max: 100, // 最大值
                            step: 1, // 步长
                            placeholder: '请输入数量', // 占位符
                            default: 1, // 默认值
                            rules: [{ required: true, message: '数量不能为空', trigger: 'blur' },
                            { type: 'number', message: '数量必须为数字', trigger: 'blur' }]
                        },
                        {
                            type: 'radio',
                            label: '爱好',
                            prop: 'hobby', default: undefined, // 单选默认值可以设置为 undefined 或第一个选项的值
                            options: [
                                { label: '足球', value: 'soccer' },
                                { label: '篮球', value: 'basketball' }
                                // 可以添加更多选项
                            ],
                            rules: [{ required: true, message: '请选择爱好', trigger: 'change' }]
                        },
                        {
                            type: 'checkbox',
                            label: '技能',
                            prop: 'skills', default: [], // 多选默认值应为数组
                            options: [
                                { label: '编程', value: 'coding' },
                                { label: '设计', value: 'design' },
                                { label: '测试', value: 'test' },
                                { label: '部署', value: 'uat' },
                            ],
                            rules: [{ required: true, message: '请选择至少一个技能', trigger: 'change' }]
                        }
                    ],
                }
            },
            created() {  this.handleLoadData();},
            mounted: function () { },
            methods: {
                initForm() {
                    this.formJson.forEach(item => { this.$set(this.formData, item.prop, item.default); });
                },
                handleOpenDialog(e) {
                    if (e) { this.formData = e.row;}
                    else { this.initForm(); }
                    this.dialogVisible = true;
                },
                handleClose(e) {
                    this.dialogVisible = e;
                },
                handleLoadData(e) {
                    console.log("查询条件", e);
                    if (e)
                    this.filter = e.filter;
                    this.loading = true;
                    // this.post("@("/jobList")", that.tableQuery)
                    //     .then(function (res) {
                    //         that.tableData = res.data.data.rows;
                    //         that.tableQuery.totalRows = res.data.data.totalRows;
                    //         that.loading = false;
                    //     }).catch(function (res) { that.loading = false; });
                },
                handleDelete(e) {
                    console.log("handleDelete", e);
                    return false;
                    //     axios("@("/remove/")" + row.id).then(function (res) {
                    //         if (res.data.code == 200) {
                    //             that.$message({ message: res.data.message, center: true, type: 'success' });
                    //             rows.splice(index, 1);
                    //             that.OnLoadJobs();
                    //         } else {
                    //             that.$message({ message: res.data.message, center: true, type: 'error' });
                    //         }
                    //     });
                },
                submitForm(data) {
                    console.log("表单提交方法", data)
                    // axios.post("@("/jobsave")", this.form).then(function (res) {
                    //     if (res.data.code == 200) {
                    //         ELEMENT.MessageBox.alert(res.data.message, "系统信息", {
                    //             type: 'success', callback: () => {
                    //                 that.OnLoadJobs(); that.dialogForm = that.dialogInitForm; that.dialogFormVisible = false;
                    //             }
                    //         });
                    //     } else {
                    //         ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'info', callback: () => { } });
                    //     }
                    // });
                },
                viewDetailDialog(e) {
                    console.info("viewDialogForm 打开详情弹窗方法")
                    this.dialogVisible = true;
                    if (e) {
                        this.formData = e.row;
                    }
                    // axios("@("/getjob/")" + row.id).then(function (res) { if (res.data.code == 200) { that.dialogForm = res.data.data; } });
                },
            },
            filters: {
                scheduleTypeTitle(data) {
                    return data.scheduleTypeText + ":" + data.runTypeText;
                }
            }
        });
    </script>
</body>
</html>
